<template>
	<view class="msg-box" v-for="item in filterList">
		<p class="xsm-notice-time">{{item.time}}</p>
		<view class="xsm-notice-textbox">
			<p>{{item.title}}</p>
		</view>
	</view>
	<noresult-remind v-if='filterList.length === 0'></noresult-remind>
</template>

<script setup>
	import {computed} from 'vue'
	import NoresultRemind from '/src/components/noresult-remind.vue'
	const props = defineProps({
		type:{
			type:String,
			default:'all'
		},
		messageList:{
			type:Array,
			default:() => []
		}
	})
	const filterList = computed(() =>{
		if(props.type === 'message'){
			return props.messageList.filter(item=>
				item.type === 'message')
		}else if(props.type === 'help'){
			return props.messageList.filter(item=>
				item.type === 'help')
		}else{
			return props.messageList
		}
	})
</script>

<style lang="scss">
	.msg-box{
		height: 5.4rem;
		
		.xsm-notice-time {
			width: 50%;
			height: 1.4rem;
			line-height: 1.4rem;
			font-size: 12px;
			background: #a1a1a1;
			color: #fff;
			text-align: center;
			border-radius: 1.4rem;
			margin-left: 25%;
			margin-top: 0.75rem;
		}
			
		.xsm-notice-textbox {
			width: 92%;
			float: left;
			background: #fff;
			margin: 0.75rem 4% 0;
			border-radius: 0.5rem;
			padding: 10px;
			box-sizing: border-box;
			font-weight: bolder;
		}
	}	
</style>